<template>
	<view id="app">
		<p class="welfare-rule" @click="RemindeCenterClick(1)">活动规则</p>
		<view class="welfare-content">
			<view class="max-title">福利社</view>
			<view class="collect-money">
				<view class='title-info' v-if="menu != ''">
					<img class="title-info-image" :src="menu[0].image" alt="" />
					<text class="title-info-title">{{menu[0].name}}</text>
					<text class="title-info-info">{{menu[0].info}}</text>
				</view>
				<view class="collect-money-use">
					<view class="collect-money-use-text">明日签到获得<text>{{signInfo.tomorrow}}</text>金币</view>
					<view @click="RemindeCenterClick(4)" class="collect-money-use-issign" style="line-height: 50rpx;" v-if="signInfo.is_sign == 0">签到领金币</view>
					<view @click="RemindeCenterClick(3)" class="collect-money-use-issign" style="line-height: 50rpx;" v-else >查看</view>
				</view>
				<view style="padding: 0 40rpx;box-sizing: border-box;overflow-y: auto;padding-bottom: 60rpx;margin-top: 40rpx;">
					<view style="width: 1180rpx;overflow-y: auto;">
						<view style="width: 45rpx;margin-right: 40rpx;display: inline-block;" v-for="(item,index) in signList">
							<view class="CashRedEnvelopes" style="position: relative;">
								<image v-if="index < count" src="../../static/hbqd.png" style="width: 100%;height: 100%;position: absolute;top: 0;z-index: 1;" mode=""></image>
								<view style="position: absolute;bottom: 10rpx;z-index: 2;">
									+{{item}}
								</view>
							</view>
							<view style="font-size: 22rpx;font-family: PingFang SC;font-weight: 500;color: #888888;width: 66rpx;">{{index + 1}}天</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view style="padding-bottom: 40rpx;">
			<view class="IndexGame">
				<image src="../../static/game.png" style="width: 43rpx;height: 32rpx;position: relative;top: 5rpx;" mode=""></image>
				<text style="margin-left: 10rpx;">赚钱吧</text>
				<text style="font-size: 24rpx;margin-left: 32rpx;">边玩小游戏，边赚大钱</text>
			</view>
			<view class="Game gameImg1" v-for="(item,index) in list" @click="ListClick(item.link)">
				<image :src="item.image" mode="" style="position: absolute;top: 0;width: 100%;height: 100%;"></image>
				<view class="GamePeople">
					<text>{{item.pople}}</text>
					<text style="color: #C0C0C0;">人正在玩</text>
				</view>
			</view>
			
		</view>
		<view class="ActivityRules" v-if="RuleSF">
			<view class="ActivityRulesWith">
				<view style="font-weight: bold;font-size: 40rpx;color: #000000;padding: 32rpx 37rpx;">
					<text >活动规则</text>
					<text style="float: right;" @click="RemindeCenterClick(2)">X</text>
				</view>
				<view class="ActivityRulesWithNR">
					融多多福利社，在提供轻松畅玩体验的同时，还可以领取 现金、金币等各类福利，让你分分钟把小金库填满!
				</view>
				<view class="ActivityRulesNRK">
					<view class="ActivityRulesName">领钱吧</view>
					<view class="ActivityRulesNR">参与签到、金币任务等活动，可领取大量金币和现金奖励。每50金 币可兑换1个现金红包。当领取的现金达到10元提现门槛后，可直 接提现到微信零钱，花它！花它！花它！</view>
				</view>
				<view class="ActivityRulesNRK">
					<view class="ActivityRulesName">赚钱吧</view>
					<view class="ActivityRulesNR">参与活动（包括但不限于玩游戏）可赚取大量现金奖励，或领取超 高现金优惠券福利。千万不要错过哦！</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {VUE_API_URL} from "@/components/pulugins/index"
	export default {
		data() {
			return {
				menu:[],
				list:[],
				webitInfo:{},
				falseData:[],
				signList:[],
				signInfo:'',
				RuleSF:false,		//活动规则弹窗
				count:0,
				website:''
			}
		},
		onLoad() {
			var that = this
			that.init()
			that.ApiWebsite();
		},
		methods: {
			ApiWebsite(){
				var that = this;
				that.$H.get('/website', {
				}, {
					native: false
				}).then(res => {
					that.website = res.data;
				})
			},
			ListClick(url){
				window.location.href=url;
			},
			RemindeCenterClick(index){
				var that = this;
				if(index == 1){				//弹出活动规则
					that.RuleSF = true;
				}else if(index == 2){		//隐藏活动规则
					that.RuleSF = false;
				}else if(index == 3){
					uni.navigateTo({		//贷款记录
					    url: '../second/CashCheck'
					});
				}else if(index == 4){
					var that = this
					uni.request({
					    url: VUE_API_URL + 'welfare/sign', 
						method:'POST',
					    data: {
							// gold:'1'
						}, 
					    header: {
					        'Authori-zation': 'Bearer ' + uni.getStorageSync('token') //自定义请求头信息
					    },
					    success: (res) => {
							console.log(res)
							if(res.data.status == 200){
								that.signInfo.is_sign = 1;
								that.init();
							}
							uni.showToast({
							    title: res.data.msg,
								icon:'none',
							    duration: 2000
							});
					    }
					});
				}
			},
			init(){
				var that = this
				uni.request({
				    url: VUE_API_URL + 'welfare/index', 
					method:'POST',
				    data: {}, 
				    header: {
				        'Authori-zation': 'Bearer ' + uni.getStorageSync('token') //自定义请求头信息
				    },
				    success: (res) => {
						var data = res.data.data
						console.log(data)
						that.menu = data.menu;				//菜单
						that.list = data.activity;			//活动
						that.falseData = data.cashList		//假数据
						that.signList = data.signList 		//签到奖励
						that.signInfo = data.signinfo		//当前用户签到信息
						that.count = data.signinfo.count
						// console.log(data.signinfo.count)
				    }
				});
				uni.request({
				    url: VUE_API_URL + 'website', 
					method:'get',
				    data: {},
				    success: (res) => {
						that.webitInfo = res.data.data
						console.log(that.webitInfo)
				    }
				});
			}
		}
	}
</script>

<style>
	::-webkit-scrollbar {
			width: 0;
			height: 0;
			background-color: transparent;
		} 
	.CashRedEnvelopes{
		width: 45rpx;
		height: 45rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #DFB993;
		background: #F2F2F2;
	}
	.ActivityRulesNRK{
		padding: 30rpx;
		box-sizing: border-box;
		border-top: 1px solid #FAECD8;
	}
	.ActivityRulesName{
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #000000;
		margin-top: 20rpx;
		margin-bottom: 24rpx;
	}
	.ActivityRulesWithNR{
		width: 100%;
		height: 140rpx;
		border-top: 1px solid #FAECD8;
		padding: 30rpx;
		box-sizing: border-box;
	}
	.ActivityRulesWith{
		width: 750rpx;
		height: 947rpx;
		background: #FFFFFF;
		border-radius: 30rpx 30rpx 0px 0px;
		position: absolute;
		bottom: 0;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #888888;
		/* padding: 32rpx 37rpx; */
		box-sizing: border-box;
	}
	.ActivityRules{
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,0.5);
		position: fixed;
		top: 0;
		z-index: 999;
	}
	/* .gameImg5{
		background-image: url(../../static/game5.png);
	}
	.gameImg4{
		background-image: url(../../static/game4.png);
	}
	.gameImg3{
		background-image: url(../../static/game3.png);
	}
	.gameImg2{
		background-image: url(../../static/game2.png);
	}
	.gameImg1{
		background-image: url(../../static/game1.png);
	} */
	.GamePeople{
		position: absolute;
		bottom: 20rpx;
		left: 30rpx;
	}
	.Game{
		width: 670rpx;
		height: 189rpx;
		background-size: 100%;
		margin: auto;
		position: relative;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FF0000;
		margin-top: 40rpx;
	}
	.IndexGame{font-size: 32rpx;font-family: PingFang SC;font-weight: bold;color: #444444;padding: 40rpx 43rpx;box-sizing: border-box;background: #FFFFFF;}
	
	page{
		background: #F8F8F8;
	}
	/* .RollingRollHB{
		background-image: url(../../static/hbqd.png);
		background-size: 100%;
		width: 44rpx;
		height: 47rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #DFB994;
		line-height: 47rpx;
	} */
	uni-swiper{
		height: 90rpx;
	}
	.RollingRoll{
		width: 100%;
	}
	#app{color:#444444;font-family: PingFang SC;}
	.welfare-rule{font-size:28rpx;text-align:right;box-sizing: border-box;padding-right: 26rpx;background: #FFFFFF;position: absolute;right: 0;top: 50rpx;}
	.welfare-content{box-sizing: border-box;padding:40rpx 38rpx 0 38rpx;background: #FFFFFF;}
	.max-title{font-size:45rpx;font-weight: bold;}
	.collect-money{margin-top: 48rpx;}
	.title-info{overflow: hidden;}
	.title-info .title-info-image{width:43rpx;height:34rpx}
	.title-info img,.title-info text{float:left;display: inline-block;}
	.title-info .title-info-title{font-size:32rpx;font-weight: bold;line-height:34rpx;margin-left:12rpx;}
	.title-info .title-info-info{font-size:24rpx;margin-top:7rpx;margin-left:31rpx}
	.collect-money .collect-money-use{margin-top:37rpx;overflow: hidden;}
	.collect-money .collect-money-use .collect-money-use-text{flaot:left;font-size:28rpx;color: #000000;line-height: 44rpx;display:inline-block;}
	.collect-money .collect-money-use .collect-money-use-text text{color:#FF4236;padding:0 10rpx}
	.collect-money .collect-money-use .collect-money-use-issign{background: linear-gradient(-84deg, #DFBA94, #DFAE7C);box-shadow: 1rpx 3rpx 10rpx 0rpx rgba(0, 0, 0, 0.16);border-radius: 22rpx;text-align: center;color:#FFFFFF;font-size:26rpx;line-height:35rpx;height:50rpx;width:152rpx;float:right}
	.collect-money .sign-list{margin-top: 40rpx;}
	.collect-money .sign-list .sign-item{float:left;font-size:24rpx;text-align:center;width:50rpx !important;padding-right: 40rpx;}
	.collect-money .sign-list .sign-item .sign-item-content{width:100%;height:47rpx;border-radius: 3rpx 3rpx 0rpx 0rpx;line-height: 47rpx;color:#DFB994;background-image: url(../../static/hbqd.png);background-size: 100% 100%;
font-size: 24rpx;font-family: PingFang SC;font-weight: 500;color: #DFB994;}
	.collect-money .sign-list .sign-item .sign-item-title{margin-top:20rpx;font-size: 20rpx;}
	.collect-money .sign-list .sign-item:not(:first-child){margin-left:43rpx;}
	.collect-money .sign-list .sign-item:not(:first-child){margin-left: 0 !important;}
	/* .collect-money .sign-list .sign-item .sign-item-content{} */
</style>
